<template>
	<view :style="$s.view_color" class="car-comment">
		<!-- 评价条 -->
		<view class="comment-text" v-if="textdata!=null" @click="moreComment">
			<text class="text-score"><text>{{textdata.car_score}}</text> 分</text>
			<rate-tag :num="textdata.car_star"></rate-tag>
<!-- 				<text class="text-count">
				<block v-if="textdata.count<=0">
					( <text> {{textdata.count}} </text>条评价 )
				</block>
				<block v-else>
					( 暂无评价 )
				</block>
			</text> -->
			<text class="more">查看评论</text>
		</view>
		
		<view class="header" v-if="topdata!=null">
			<view class="rate-box">
				<view class="score"> <text>{{topdata.car_score}}</text> </view>
				<view class="rate-tag">
					<view><rate-tag :num="topdata.car_star"></rate-tag></view>
					<view v-if="topdata.count<=0">（暂无评价）</view>
					<view v-else>车辆评价（{{topdata.count}}）</view>
				</view>
			</view>
			<view class="tag-list">
				<text class="tag-item" v-for="(val,index) in topdata.label_score" :key="index">{{val.label}} · {{val.num}}</text>
			</view>
		</view>
		
		<!-- 评价列表 - 纵向 -->
		<view class="bd" v-if="list.length>0" v-for="(item,index) in list" :key="index">
			<view class="base">
				<view class="info">
					<text class="name">{{item.nickname}}</text>
					<text class="time">{{item.addtime}}</text>
				</view>
				<view class="info" v-if="item.car_name">
					<text class="car-name">{{item.car_name}}</text>
				</view>
				<view class="tag">
					<rate-tag :num="item.score"></rate-tag>
					<block v-for="(val,index2) in item.label" :key="index2">
						<text class="tag-item">{{val}}</text>
					</block>
				</view>
			</view>
			<view class="comment-content">
				<u-parse :content="item.content"></u-parse>
			</view>
			<view class="comment-album">
				<my-album :urls="item.images" keyName="images_url" rowCount="4" maxCount="4" singleSize="70"></my-album>
			</view>
		</view>
		
		<!-- 评价列表 - 横向 -->
		<view class="bd list-row" v-if="list2.length>0" v-for="(item,index) in list2" :key="index">
			<view class="base">
				<view class="info">
					<text class="name">{{item.nickname}}</text>
					<text class="time">{{item.addtime}}</text>
				</view>
				<view class="info" v-if="item.car_name">
					<text class="car-name">{{item.car_name}}</text>
				</view>
				<view class="tag">
					<rate-tag :num="item.score"></rate-tag>
					<block v-for="(val,index2) in item.label" :key="index2">
						<text class="tag-item">{{val}}</text>
					</block>
				</view>
			</view>
			<view class="comment-content">
				<u-parse :content="item.content"></u-parse>
			</view>
		</view>
		
	</view>
</template>
<script>
	export default {
		name: 'car-comment',
		props: {
			topdata:{
				type:[Object,Array],
				default:null
			},
			textdata:{
				type:[Object],
				default:null
			},
			list:{
				type:[Object,Array],
				default:[]
			},
			list2:{
				type:[Object,Array],
				default:[]
			},
			row:{
				type:[Boolean],
				default:false,
			}
		},
		data() {
			return {
			}
		},
		watch: {
			
		},
		computed: {
			
		},
		mounted(){
			
		},
		methods: {
			//点击某个汽车评价的更多评价
			moreComment(){
				this.$c.a('order/comment/list?id='+this.textdata.id)
			}
		}
	};
</script>
<style lang="scss">
	.car-comment{
		align-items: center;
	}
	.car-comment .header {
	    margin-bottom: 28rpx;
	    padding: 20rpx;
		margin: 30rpx;
	}
	
	.car-comment .header .rate-box{
		display: -ms-flexbox;
		display: flex;
		-ms-flex-align: center;
		align-items: center;
		flex-direction: row;
	}
	
	.car-comment .header .rate-box .rate-tag {
		display: flex;
		flex-direction: column;
		margin-left: 20rpx;
	    color: rgba(60,60,90,.6);
	    font-weight: 00;
	    font-size: 20rpx;
	}
	
	.car-comment .header .rate-box .score {
	    font-weight: 700;
	    font-size: 40rpx;
		align-items: center;
	}
	
	.car-comment .header .rate-box .score text{
	    font-weight: 700;
		color: var(--view-theme);
	    font-size: 70rpx;
		margin-right: 10rpx;
	}
	
	.car-comment .header .tag-list{
		display: flex;
		flex-wrap:wrap;
	}
	
	.car-comment .header .tag-list .tag-item {
	    margin-left: 10rpx;
	    padding: 4rpx 10rpx;
	    color: var(--view-theme);
	    font-size: 24rpx;
	    background: $u-primary-light;
	    border-radius: 20rpx;
	}
	
	.bd {
	    padding: 28rpx 20rpx 28rpx 30rpx;
	    border: 2rpx solid rgba(60,60,90,.1);
	    border-radius: 20rpx;
		margin: 30rpx;
		margin-buttom: 0rpx;
		background: #FFFFFF; 
	}
	
	.bd .base .info,.bd .base .tag {
	    display: -ms-flexbox;
	    display: flex;
	    -ms-flex-align: center;
	    align-items: center;
	}
	
	.bd .base .info .name {
	    font-weight: 700;
	    font-size: 28rpx;
	}
	
	.bd .base .info .time {
	    margin-left: auto;
	    color: rgba(60,60,90,.4);
	    font-size: 22rpx;
	}
	
	.bd .base .info .car-name {
	    margin-right: auto;
	    color: rgba(60,60,90,.4);
	    font-size: 22rpx;
	}
	
	.bd .base .tag {
	    margin-top: 8rpx;
	}
	
	.bd .base .tag .tag-item {
	    margin-left: 10rpx;
	    padding: 4rpx 10rpx;
	    color: var(--view-theme);
	    font-size: 18rpx;
	    background: $u-primary-light;
	    border-radius: 20rpx;
	}
	
	.bd .comment-album{
		margin-top: 20rpx;
	}
	
	.bd .comment-content {
	    display: -webkit-box;
	    padding-top: 24rpx;
	    overflow: hidden;
	    color: rgba(60,60,90,.8);
	    font-size: 26rpx;
	    text-overflow: ellipsis;
	    word-wrap: break-word;
	    -webkit-line-clamp: 5;
	    -webkit-box-orient: vertical;
	}
	
	.comment-text{
		display: flex;
		align-items: center;
		color: $u-content-color;
		font-size: 24rpx;
		padding: 10rpx 0rpx;
	}
	.comment-text text text{
		color: var(--view-theme);
	}
	
	.comment-text .text-score{
		margin-right: 20rpx;
	}
	
	.comment-text .text-count{
		margin-left: 20rpx;
	}
	
	.comment-text .more {
	    margin-left: auto;
	    padding-right: 26rpx;
	    background: url(@/static/images/arrow-solid-right.png) right center no-repeat;
	    background-size: 8rpx auto;
	}
	
	.list-row{
		display: inline-block;
	}
	
	.list-row .comment-content {
	    display: -webkit-box;
	    padding-top: 24rpx;
	    overflow: hidden;
	    color: rgba(60,60,90,.8);
	    font-size: 26rpx;
	    text-overflow: ellipsis;
	    word-wrap: break-word;
	    -webkit-line-clamp: 1;
	    -webkit-box-orient: vertical;
		width: 400rpx;
	}
</style>
